<div class="mar-st-a30">
	<div class="hr-20"></div>
	<input type="hidden" id="platform" name="platform" value="{{platform}}" />
	<input type="hidden" id="app_version" name="version"
		value="{{versions}}" /> <input type="hidden" id="app_appid" name="id"
		value="{{appId}}" /> <input type="hidden" id="app_widgetid_add"
		name="app_widgetid" value="" /> <input type="hidden"
		id="app_widgetversion_add" name="app_widgetversion_add" value="" /> <input
		type="hidden" id="app_widgetid_delete" name="app_widgetid_delete"
		value="" /> <input type="hidden" id="app_widgetversion_delete"
		name="app_widgetversion_delete" value="" />
	<table style="width: 100%">
		<tbody>
			<tr class="bg-bl-q">
				<th class="text-center"><h4>可选模块</h4></th>
				<th>&nbsp;</th>
				<th class="text-center"><h4>已选模块</h4></th>
			</tr>
		</tbody>
		<tbody class="bordered">
			<tr>
				<td width="45%">
					<ul class="selectable ui-selectable" id="selectable">
						{{#noLinkWidget}}
						<li id="selectLi{{id}}" style="width: 160px; height: 160px"><img
							id="appIcon{{id}}" data-toggle="modal" href="#"
							onclick="selectWidget('{{id}}')"
							src="{{ctx}}/mam/attachment/download/{{icon_id}}"
							class="ui-selectee img-rounded info-icon"
							style="width: 80px; height: 80px; cursor: pointer" />
							<p class="ui-selectee">{{name}}</p>
							<p class="mar-st-b20">
								<select name="app_widgetversion"
									id="add_widgetversionselect{{id}}"
									onchange="add_widgetversion('{{id}}')"> {{#wVersion}}
									<option value="{{version}}">{{version}}</option> {{/wVersion}}
								</select>
							</p></li>
						<script type="text/javascript">
							var icon_id = "{{icon_id}}";
							if (icon_id != "") {
								jQuery("#appIcon{{id}}")
										.attr("src",
												"{{ctx}}/mam/attachment/download/{{icon_id}}");
							} else {
								jQuery("#appIcon{{id}}").attr("src",
										"{{ctx}}/static/bsl/images/defind.png");

							}
						</script>
						{{/noLinkWidget}}
					</ul>
				</td>
				<td class="cursor-st text-center"><a class="hover"
					id="addWidgethover" href="javascript:addWidget()">&gt;</a> <br>
					<img src="{{ctx}}/static/bsl/images/loadImage.gif" border="0"
					style="display: none; width: 50px; height: 50px" alt="loading..."
					id="load" /> <a href="javascript:deleteWidget()"
					id="deleteWidgethover">&lt;</a></td>
				<td width="45%">
					<ul class="selectable ui-selectable" id="hasSelectabler">
						{{#linkWidget}}
						<li id="selectLi{{id}}" style="width: 160px; height: 160px"><img
							id="appIcon{{id}}" src="{{ctx}}/static/bsl/images/icon_06.png"
							class="ui-selectee img-rounded info-icon"
							style="width: 80px; height: 80px; cursor: pointer"
							onclick="selectWidgetDelete('{{id}}')" />
							<p class="ui-selectee">{{name}}</p>
							<p class="mar-st-b10">
								<select name="app_widgetversion_delete"
									id="delete_widgetversionselect{{id}}" class="mar-st-b10"
									onchange="update_widgetversion('{{id}}',this.value)">
									{{#wVersion}}
									<option value="{{version}}">{{version}}</option> {{/wVersion}}
								</select>
							</p></li>

						<script type="text/javascript">
							var icon_id = "{{icon_id}}";
							if (icon_id != "") {
								jQuery("#appIcon{{id}}")
										.attr("src",
												"{{ctx}}/mam/attachment/download/{{icon_id}}");
							} else {
								jQuery("#appIcon{{id}}").attr("src",
										"{{ctx}}/static/bsl/images/defind.png");

							}

							$(
									"#delete_widgetversionselect{{id}} option[value='{{discription}}']")
									.attr("selected", true)
						</script>
						{{/linkWidget}}
					</ul>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<script>
	var relationships = {};
	var disRelationships = {};

	//添加模块
	function cleanSelect(widgetId) {
		$("li[class='ui-selecting']").each(function(index) {
			$(this).attr('class', "");
		});
		$('#selectLi' + widgetId).attr("class", "ui-selecting");
	}

	function selectWidget(widgetId) {
		//		cleanSelect(widgetId);
		var appId = $('#app_appid').val();
		var appVersion = $('#app_version').val();
		var platform = $('#platform').val();
		var value = $('#add_widgetversionselect' + widgetId).val();

		var classList = $('#selectable').find('#selectLi' + widgetId).attr(
				"class");
		if (classList && classList == "ui-selecting") { //选中状态
			//去除节点,反选模块
			delete relationships[widgetId];
			$('#selectable').find('#selectLi' + widgetId).removeClass(
					"ui-selecting");
		} else { //未选中
			//添加选中状态,加入到数据队列
			$('#selectable').find('#selectLi' + widgetId).attr("class",
					"ui-selecting");
			relationships[widgetId] = {
				widgetVersion : value,
				widgetId : widgetId,
				appId : appId,
				appVersion : appVersion,
				platform : platform
			};
		}
	};

	function add_widgetversion(widgetId) {
		selectWidget(widgetId);
	}

	function addWidget() {
		var datas = [];
		for ( var key in relationships) {
			datas.push(relationships[key]);
		}

		if (datas.length == 0) {
			bootbox.alert("请选择模块");
			return;
		}
		$.ajax({
			url : "{{ctx}}/mam/appwidgets/{{platform}}/relations",
			type : 'POST',
			data : JSON.stringify(datas),
			dataType : "json",
			contentType : 'application/json',
			success : function(resultData) {
				if (resultData.result == "success") {
					$('#app_widgetid_add').val("");
					$('#load').show();
					reloadPanel('{{platform}}', '{{versions}}', '{{appId}}');
				} else {
					bootbox.alert("模块加载失败，请稍后再试！");
				}
			},
			error : function() {
				bootbox.alert("系统繁忙，请稍后再试！");
			}
		});
	}

	function selectWidgetDelete(widgetId) {
		//		cleanSelect(widgetId);
		var appId = $('#app_appid').val();
		var appVersion = $('#app_version').val();
		var platform = $('#platform').val();
		var value = $('#delete_widgetversionselect' + widgetId).val();

		var classList = $('#hasSelectabler').find('#selectLi' + widgetId).attr(
				"class");
		if (classList && classList == "ui-selecting") { //选中状态
			//去除节点,反选模块
			delete disRelationships[widgetId];
			$('#hasSelectabler').find('#selectLi' + widgetId).removeClass(
					"ui-selecting");
		} else { //未选中
			//添加选中状态,加入到数据队列
			$('#hasSelectabler').find('#selectLi' + widgetId).attr("class",
					"ui-selecting");
			disRelationships[widgetId] = {
				widgetVersion : value,
				widgetId : widgetId,
				appId : appId,
				appVersion : appVersion,
				platform : platform
			};
		}
	}

	function update_widgetversion(widgetId, version) {
		var data = {};
		data.appId = $('#app_appid').val();
		data.appVersion = $('#app_version').val();
		data.platform = $('#platform').val();
		data.widgetId = widgetId;
		data.widgetVersion = version;
		$.ajax({
			async : true,
			type : "PUT",
			url : "{{ctx}}/mam/appwidgets/{{platform}}/relations",
			data : JSON.stringify(data),
			dataType : "json",
			contentType : 'application/json',
			success : function(result, textStatus) {
				if (result.result == "success") {
					bootbox.alert("修改成功！", function() {
						selectWidgetDelete(widgetId);
					});
				} else {
					bootbox.alert("修改失败，请稍后再试！");
				}
			},
			error : function(result, status, e) {
				bootbox.alert("系统繁忙，请稍后再试！");
			}
		});
	}

	function deleteWidget() {
		var datas = [];
		for ( var key in disRelationships) {
			datas.push(disRelationships[key]);
		}

		if (datas.length == 0) {
			bootbox.alert("请选择模块");
			return;
		}
		$.ajax({
			url : "{{ctx}}/mam/appwidgets/{{platform}}/relations",
			type : 'DELETE',
			data : JSON.stringify(datas),
			dataType : "json",
			contentType : 'application/json',
			success : function(resultData) {
				if (resultData.result == "success") {
					$('#app_widgetid_delete').val("")
					$('#load').show();
					reloadPanel('{{platform}}', '{{versions}}', '{{appId}}');
				} else {
					bootbox.alert("删除失败，请稍后再试！");
				}
			},
			error : function() {
				bootbox.alert("系统繁忙，请稍后再试！");
			}
		});
	}
</script>